import React from 'react';
import { Button, notification, Card } from 'antd';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import { Dragact } from 'dragact';
import styles from './AddNewActivity.less';

const CardItem = ({ item, provided, onDelete }) => {
  return (
    <div className={styles['layout-Item']} {...provided.props} {...provided.resizeHandle}>
      <div
        style={{
          position: 'absolute',
          width: 10,
          height: 10,
          right: 15,
          top: 5,
          cursor: 'pointer',
        }}
        onClick={() => onDelete(item.key)}
      >
        ❌
      </div>
      <div {...provided.dragHandle} style={{ padding: 5, textAlign: 'center', color: '#595959' }}>
        {item.content}
      </div>
    </div>
  );
};

const Words = [
  { content: 'You can do anything, but not everything.' },
  { content: 'Those who dare to fail miserably can achieve greatly.' },
  { content: 'You miss 100 percent of the shots you never take.' },
  { content: 'Those who believe in telekinetics, raise my hand.' },
  { content: 'I’d rather live with a good question than a bad answer.' },
];

const fakeData = () => {
  var Y = 0;
  return Words.map((item, index) => {
    if (index % 4 === 0) Y++;

    return {
      ...item,
      GridX: (index % 4) * 4,
      GridY: Y * 4,
      w: 4,
      h: 3,
      key: index,
    };
  });
};

const makeOne = () => {
  return { content: 'added', GridX: 0, GridY: 0, w: 4, h: 3, key: Date.now() };
};

export default class AddNewActivity extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '123',
      layout: fakeData(),
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange = value => {
    this.setState({ value: value });
  };

  prompt = () => {
    notification.open({
      message: 'We got value:',
      description: <span dangerouslySetInnerHTML={{ __html: this.state.value }} />,
    });
  };

  handleClick = () => {
    const change = this.state.layout.map(item => {
      return { ...item, content: '21312' };
    });
    this.setState({
      layout: [...change, makeOne()],
    });
  };
  hanldeOnDelete = key => {
    const layout = this.state.layout.filter(item => {
      if (item.key !== key) {
        return item;
      }
    });
    this.setState({
      layout: layout,
    });
  };

  render() {
    const modules = {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'], // toggled buttons
        ['blockquote', 'code-block'],

        [{ header: 1 }, { header: 2 }], // custom button values
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }], // superscript/subscript
        [{ indent: '-1' }, { indent: '+1' }], // outdent/indent
        [{ direction: 'rtl' }], // text direction

        [{ size: ['small', false, 'large', 'huge'] }], // custom dropdown
        [{ header: [1, 2, 3, 4, 5, 6, false] }],

        [{ color: [] }, { background: [] }], // dropdown with defaults from theme
        [{ font: [] }],
        [{ align: [] }],
        ['link', 'image', 'video'],
        ['clean'],
      ],
    };

    const margin = [5, 5];
    const dragactInit = {
      width: 400,
      col: 6,
      rowHeight: 40,
      margin: margin,
      className: styles.normal_layout,
      layout: this.state.layout,
      placeholder: true,
      style: { background: '#9cdfff' },
    };

    const arrMenu = ['标题'];

    return (
      <div className={styles.container1}>
        <div className={styles['section1-bg']} />

        <Card className={styles['section2-bg']} title="富文本编辑器">
          <ReactQuill
            theme="snow"
            modules={modules}
            value={this.state.value}
            onChange={this.handleChange}
          />
          <Button style={{ marginTop: 16 }} onClick={this.prompt}>
            Prompt
          </Button>
        </Card>

        <div className={styles['section3-bg']}>
          <div>
            <div className={styles['section3-title']}>活动模版设计</div>
            <Dragact {...dragactInit}>
              {(item, provided) => {
                return <CardItem item={item} provided={provided} onDelete={this.hanldeOnDelete} />;
              }}
            </Dragact>
          </div>
        </div>
      </div>
    );
  }
}
